<template>
   <div>
       <cu-navbar>
           <block slot="content">封存</block>
       </cu-navbar>
       <view class="page order-page">
           <div class="order-list">
               <div class="order-item" v-for="(item,index) in orderListShow" :key="item.order_sn">
                   <div class="order-header f-r a-c j-b">
                       <div class="order-num">{{ item.name }}</div>
                       <div class="order-status">
                           <div v-if="item.status == 0" class="text">已封存</div>
                         <div v-if="item.status == 1" class="text">已解封</div>
                       </div>
                   </div>
                   <div class="order-content f-r">
                       <u-image :src="item.image" width="160rpx" height="160rpx"></u-image>
                       <div style="margin-left: 20rpx;">
                           <div class="order-price">
                               <span>价格：</span>
                               <span class="order-price1">￥{{ item.price }}</span>
                           </div>
                       </div>
                   </div>
                   <div class="order-date">{{ $common.timeToDate(item.create_time * 1000, true) }}</div>
                   <div class="order-date">{{ item.realname }}</div>
                   <div class="f-r a-c f-e button-list" style="width: 100%;justify-content: flex-end">
                     <div v-if="item.status == 1" class="button" @click="openzhuandan(item,index)">指派</div>
                     <div v-if="item.status == 1" class="button" @click="fengcun(item,index)">封存</div>
                       <div v-if="item.status == 0" class="button" @click="jiefeng(item,index)">解封</div>
                       <div v-if="item.status == 1" class="button" @click="openzhuanchang(item,index)">转场</div>
                   </div>
               </div>
           </div>
           <!-- 古玩转宝阁 -->
           <u-popup v-model="show" mode="center">
               <view class="box_popup box_popup1">
                   <view>转场</view>
                   <view>输入接收转场编号</view>
                   <input type="text" v-model="orgcode" />
                   <view class="btn">
                       <view class="cancel" @click="show = false">取消</view>
                       <view class="ok" @click="submitZC">确定</view>
                   </view>
               </view>
           </u-popup>
           <u-empty
               v-if="!orderListShow.length"
               mode="order"
           />
           <footer-page
               :page="page"
               :pagesize="pagesize"
               :page-size="pageSize"
               :page-total="pageTotal"
               @pre="pagePre"
               @next="pageNext"
           ></footer-page>

         <u-popup v-model="show3" mode="bottom"  @close="close"  border-radius="14" closeable>
           <div class="popup-content" style="padding: 50px 10px 100px 10px">
             <u-form  labelWidth="120rpx">
               <u-form-item label="手机号" border ref="item1">
                 <u-input placeholder="请输入手机号" v-model="zhuandanphone" style="background-color: rgba(0,0,0,0.1)"></u-input>
               </u-form-item>
               <u-form-item >
                 <div class="button" style="width: 100%" @click="zhuandan">提交</div>
               </u-form-item>
             </u-form>
           </div>
         </u-popup>
       </view>
   </div>
</template>

<script>
import footerPage from "@/components/footer-page/index.vue";
import page from '@/mixins/page'
const tabMap = {
    6: 0,
    0: 1,
    1: 2,
    2: 3,
}
const tabMap2 = {
    0: 6,
    1: 0,
    2: 1,
    3: 2,
}
export default {
    components: {
        footerPage,
    },
    mixins: [page],
    data() {
        return {
            searchValue: '',
            tabsList: [
                { name: '全部', value: '6' },
                { name: '待付款', value: '0' },
                { name: '待收款', value: '1' },
                { name: '委托代卖', value: '2' },
            ],
            orderList: [
            ],
            tabValue: 0,
            chaifenNum: 0,
            show: false,
            orgcode: '',
            product_sn: '',
            pagesize: 9999,

          currentzhuandanItem: {},
          show3: false,
          zhuandanphone: ''
        }
    },
    computed: {
        orderListShow() {
            return this.orderList
        }
    },
    onLoad(options) {
        this.tabValue = tabMap[options.type]
        
    },
    onShow() {
        this.getList()
    },
    onPullDownRefresh() {
        this.page = 1
        this.getList()
    },
    methods: {
        changeTab(e) {
            this.tabValue = e
            this.page = 1
            this.getList()
        },
        getList() {
            this.$api.fengcunList({
                page: this.page,
                pagesize: this.pagesize,
            }).then(res => {
                console.log(res)
                this.orderList = res.result || []
                uni.stopPullDownRefresh()
            })
        },
      openzhuandan(item) {
        this.currentzhuandanItem = item || {}
        this.zhuandanphone = ''
        this.show3 = true
      },
      zhuandan() {
        // 校验手机号
        if (!this.zhuandanphone) return this.$common.errorToShow('请输入手机号')
        if (!this.$common.isPhoneNumber(this.zhuandanphone)) return this.$common.errorToShow('手机号格式不正确')

        this.$api.zhipaidingdan({
          order_id: this.currentzhuandanItem.id,
          phone: this.zhuandanphone
        }).then(res => {
          if (res.code === 1) {
            this.show3 = false
            this.page = 1
            this.getList()
            this.$common.successToShow(res.reason)
          } else {
            this.$common.errorToShow(res.reason)
          }
        })

      },
        // 封存
        fengcun(item) {
            this.$common.modelShow('提示', '确认封存？',() => {
                this.$api.fengcun({
                    product_sn: item.product_sn
                }).then(res => {
                    if (res.code == 1) {
                        this.pageNo = 1
                        this.getList()
                        setTimeout(() => {
                            uni.showToast({
                                icon: 'none',
                                title: res.reason
                            })
                        })
                    }
                })
            })
        },
        // 解封
        jiefeng(item) {
            this.$common.modelShow('提示', '确认解封？',() => {
                this.$api.jiefeng({
                    product_sn: item.product_sn
                }).then(res => {
                    if (res.code == 1) {
                        this.pageNo = 1
                        this.getList()
                        setTimeout(() => {
                            uni.showToast({
                                icon: 'none',
                                title: res.reason
                            })
                        })
                    }
                })
            })
        },
        openzhuanchang(item) {
            this.show = true
            this.product_sn = item.product_sn
        },
        submitZC() {
            if (!this.orgcode) {
                uni.showToast({
                    icon: 'none',
                    title: '转场号码不能为空'
                })
                return
            }
            this.$api
                .zhuanchang({
                    product_sn: this.product_sn,
                    orgcode: this.orgcode,
                })
                .then((res) => {
                    this.$common.errorToShow(res.reason);
                    if (res.code == 1) {
                        this.closePopup()
                        this.getList()
                    }
                });
        },
    }
}
</script>

<style lang="scss">

.button {
  background-color: rgb(255, 68, 59);
  color: #fff;
  text-align: center;
  line-height: 60rpx;
  border-radius: 4px;
  margin-left: 10rpx;
  font-size: 24rpx;
  padding: 0 20rpx;
}
.order-page {
    height: 100%;
    .input-box {
        background-color: #fff;
        padding: 18px 10px 8px 10px;
    }
    .tabs {
        width: 100%;
        background-color: #fff;
    }
    .order-list {
        padding: 30rpx;
        .order-item {
            margin-bottom: 20rpx;
            border-radius: 4px;
            background-color: #fff;
            padding: 30rpx;
            .order-header {
                .order-num {
                    font-size: 32rpx;
                    margin-bottom: 10rpx;
                }
                .order-status {
                    font-size: 24rpx;
                    .text {
                        color: #666;
                        font-weight: bold;
                    }
                }
            }
            .order-content {
                margin: 10rpx 0;
                .order-name {
                    font-size: 32rpx;
                    margin-bottom: 10rpx;
                }
                .order-price {
                    font-size: 24rpx;
                    color: #999;
                }
                
                .order-price1 {
                    color: #f44336;
                }
                .order-price2 {
                    font-size: 24rpx;
                    color: #999;
                    text-decoration-line: line-through;
                }
                
            }
            .order-date {
                flex-shrink: 0;
                font-size: 28rpx;
                color: #999;
            }
            .button-list {
                flex-grow: 1;
                margin-top: 10rpx;
                .button {
                    background-color: rgb(255, 68, 59);
                    color: #fff;
                    text-align: center;
                    line-height: 60rpx;
                    border-radius: 4px;
                    margin-left: 10rpx;
                    font-size: 24rpx;
                    padding: 0 20rpx;
                }
            }
        }
    }
    
    .box_popup {
        width: 662upx;
        text-align: center;
        
        & view:nth-child(1) {
            margin-top: 32upx;
            color: #333;
            font-size: 32upx;
            font-family: PingFang SC;
            font-weight: 500;
        }
        
        & view:nth-child(2) {
            margin-top: 38upx;
            font-size: 28upx;
            font-family: PingFang SC;
            font-weight: 500;
            color: #fea845;
        }
        
        .btn {
            display: flex;
            
            
            view {
                width: 50%;
                border-top: 2upx solid #e6e6e6;
                opacity: 1;
                text-align: center;
                line-height: 100upx;
            }
            
            .cancel {
                border-right: 2upx solid #e6e6e6;
                color: #999999;
                font-size: 36upx;
                font-family: PingFang SC;
                font-weight: 500;
            }
            
            .ok {
                color: #007aff;
                margin-top: 32upx;
                font-size: 36upx;
                font-family: PingFang SC;
                font-weight: 500;
            }
        }
    }
    
    .box_popup1 {
        & view:nth-child(2) {
            width: 424upx;
            font-size: 28upx;
            font-family: PingFang SC;
            font-weight: 500;
            color: #fea845;
            margin: 38upx auto 0;
        }
        
        input {
            width: 424upx;
            border: 2upx solid #e6e6e6;
            margin: 0 auto;
            height: 64upx;
            margin-top: 38upx;
        }
    }
}
</style>
